<template>
    <div>
        
        <div class="table-page-search-wrapper" style="margin-top: 10px;">
                <a-form layout="inline" >
                  <a-row :gutter="24">
                    <a-col :xl="12" :lg="12" :md="12" :sm="24" style="height: 50px">
                      <!-- <a-form-item :label="$t('atmoEnvMonitoring.queryName.recordId')">
                        <a-select :placeholder="$t('atmoEnvMonitoring.queryName.placeholderRecordId')" v-model="recordIdReq" >
                          <a-select-option v-for="(record,index) in recordList" :value="record.recordId" :key="index">{{ record.subSystem }}</a-select-option>
                        </a-select>
                      </a-form-item> -->
                    </a-col>
                    <a-col :xl="12" :lg="12" :md="12" :sm="24" style="height: 50px">
                      <!-- <a-form-item :label="$t('atmoEnvMonitoring.queryName.region')">
                        <a-input :placeholder="$t('atmoEnvMonitoring.queryName.placeholderRegion')" v-model="regionReq">
                        </a-input>
                      </a-form-item> -->
                    </a-col>
                  </a-row>
                  <a-row :gutter="24">
                    <a-col :xl="6" :lg="7" :md="8" :sm="24">
                      <!-- <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                        <a-button type="primary" @click="search()" icon="search">{{$t('atmoEnvMonitoring.queryName.search')}}</a-button>
                        <a-button @click="reset()" icon="reload" style="margin-left: 10px">{{$t('atmoEnvMonitoring.queryName.reset')}}</a-button>
                        <a-button @click="exportRankingFile()" icon="download" style="margin-left: 10px">导出</a-button>
                      </span> -->
                    </a-col>
                  </a-row>
                </a-form>
            </div>
            <div class="table">
                <a-table
                  ref="table"
                  size="middle"
                  bordered
                  rowKey="id"
                  :columns="columnsList"
                  :dataSource="dataSource"
                  :pagination="false"
                  :loading="loading"
                  :customRow="customRow"
                  >
                  <span slot="action" slot-scope="text, record">
                    <!-- <a @click="showDetailBox(record)" >{{$t('detailTitle')}}</a> -->
                  </span>
                </a-table>
                <div style="height:40px;margin:10px auto;text-align:center;">
                    <a-pagination
                      :current="current"
                      show-size-changer
                      show-quick-jumper
                      :default-current="1"
                      :total="total"
                      :defaultPageSize = "pageSize"
                      @change="changeCurrent"
                      @showSizeChange="onShowSizeChange"
                      :page-size-options="pageSizeOptions"
                      :key = "current"
                    /> 
                    <br />
                  </div>
            </div>
            <div class="bg-box" v-if="showDetail">
      <!-- <div class="detail-box">
        <div class="detail-title">{{ $t('detailTitle') }}</div>
        <img class="close-img" src="@/assets/close.png" @click="showDetail = false" />
        <div class="detail-row">
          <div class="detail-item">
            <div class="detail-label">{{ $t('atmoEnvMonitoring.blackwater.detail.number') }}：</div>
            <div class="detail-value">{{ record.number }}</div>
          </div>
          <div class="detail-item">
            <div class="detail-label">{{ $t('atmoEnvMonitoring.blackwater.detail.lon') }}：</div>
            <div class="detail-value">{{ record.longitude }}</div>
          </div>
          <div class="detail-item">
            <div class="detail-label">{{ $t('atmoEnvMonitoring.blackwater.detail.lat') }}：</div>
            <div class="detail-value">{{ record.latitude }}</div>
          </div>
        </div>
        <div class="detail-row">
          <div class="detail-item">
            <div class="detail-label">{{ $t('atmoEnvMonitoring.blackwater.detail.area') }}：</div>
            <div class="detail-value">{{ record.area }} m²</div>
          </div>
          <div class="detail-item">
            <div class="detail-label">{{ $t('atmoEnvMonitoring.blackwater.detail.type') }}：</div>
            <div class="detail-value">{{ record.type }}</div>
          </div>
          <div class="detail-item">
            <div class="detail-label">{{ $t('atmoEnvMonitoring.blackwater.detail.province') }}：</div>
            <div class="detail-value">{{ record.province }}</div>
          </div>
        </div>
        <div class="detail-row">
          <div class="detail-item">
            <div class="detail-label">{{ $t('atmoEnvMonitoring.blackwater.detail.city') }}：</div>
            <div class="detail-value">{{ record.city }}</div>
          </div>
          <div class="detail-item">
            <div class="detail-label">{{ $t('atmoEnvMonitoring.blackwater.detail.county') }}：</div>
            <div class="detail-value">{{ record.county }}</div>
          </div>
          <div class="detail-item">
            <div class="detail-label">{{ $t('atmoEnvMonitoring.blackwater.detail.town') }}：</div>
            <div class="detail-value">{{ record.town }}</div>
          </div>
        </div>

        <div class="detail-row">
          <div class="detail-item">
            <div class="detail-label">{{ $t('operateUserName') }}：</div>
            <div class="detail-value">{{ operateUserName }}</div>
          </div>
          <div class="detail-item">
            <div class="detail-label">{{ $t('operateUserPhone') }}：</div>
            <div class="detail-value">{{ operateUserPhone }}</div>
          </div>
          <div class="detail-item">
            <div class="detail-label">{{ $t('remark') }}：</div>
            <div class="detail-value">{{ remark }}</div>
          </div>
        </div>
        <div class="detail-row">
          <div class="detail-item">
            <div class="detail-label">{{ $t('detailSpotsQuality') }}：</div>
            <div class="detail-value">{{ record.quality }}</div>
          </div>
        </div>
        <div class="detail-row" style="padding-bottom: 20px">
          <viewer :images="picList"
            ><img :src="'data:image/png;base64,' + pic" v-for="(pic, index) in picList"
          /></viewer>
        </div>
        
      </div> -->
    </div>
    </div>
</template>
<script>
import Vue from 'vue'
import { ACCESS_TOKEN } from "@/store/mutation-types"
import newaxios from 'axios'
//import MainMap from '@/components/Maps/MainMap'
//import { bus } from '@/bus.js' //引入bus.js定义的空的Vue实例
import store from '@/store/'
//import { postAction,getAction } from '@/api/manage'
const columnsList=[
    {
      title: '序号',
      dataIndex: 'key',
      key: 'key',
      align: 'center',
      width: 35,
      customRender: function (t, r, index) {
        return parseInt(index) + 1
      },
    },
    {
      title: '区域',
      align: "center",
      width: 70,
      dataIndex: 'region',
      key: 'region',
    },
    {
      title: '核查任务个数',
      align: "center",
      width: 70,
      dataIndex: 'totalCheckNum',
      key: 'totalCheckNum',
    },
    {
      title: '未核查个数',
      align: "center",
      width: 70,
      dataIndex: 'noCheckNum',
      key: 'noCheckNum',
    },
    {
      title: '已核查个数',
      align: "center",
      width: 70,
      dataIndex: 'checkNum',
      key: 'checkNum',
    },
    {
      title: '整改任务个数',
      align: "center",
      width: 70,
      dataIndex: 'totalRectifyNum',
      key: 'totalRectifyNum',
    },
    {
      title: '未整改个数',
      align: "center",
      width: 70,
      dataIndex: 'noRectifyNum',
      key: 'noRectifyNum',
    },
    {
      title: '已整改个数',
      align: "center",
      width: 70,
      dataIndex: 'rectifyNum',
      key: 'rectifyNum',
    },
    {
      title: '销号个数',
      align: "center",
      width: 70,
      dataIndex: 'completeNum',
      key: 'completeNum',
    },
]
export default {
    name:"",
    data() {
        return {
            //统计
            recordIdReq:"",
            regionReq:"",
            loading:false,
            current:1,
            total:0,
            pageSize:10,
            dataSource:[],
            pageSizeOptions: ['10', '20', '30'],
            showDetail:false,
            totalList:[],
            recordList:[],
            regionList:[],
            record:[],
            picList:[],
            columnsList,
            showPicTitle:false,
            operateUserName :"",
            operateUserPhone:"",
            remark:"",
        }
    },
    methods: {      
        /* 分页器 */
        onShowSizeChange(current, pageSize) {
          this.pageSize = pageSize;
          this.current = current;
          this.getDataList()
        },
        changeCurrent(page, pageSize) {
          this.current = page
          console.log(this.current, pageSize);
          this.getDataList()
        },
        search(){
            this.getDataList()
        },
        reset(){
            this.recordIdReq=this.recordList[0].recordId
            this.regionReq = ""
            this.current = 1
            this.getDataList()
        },
        getDataList(){
            const token = Vue.ls.get(ACCESS_TOKEN);
            this.loading = true
            newaxios({
                method: "get",
                url: '/eco_back/service/statistic/getPlotRankStatistic',
                params: {
                  pageNo: this.current,
                  pageSize: this.pageSize,
                  recordId:this.recordIdReq,
                  region:this.regionReq,
                  name:'黑臭水体监测'
                }, headers: {
                  "X-Access-Token": token,
                  'Content-Type': 'application/json;charset=UTF-8',
                }
            }).then(response => {
              this.loading = false
              if (response.data.message == "操作成功！") {
                this.total = response.data.result.total;
                this.dataSource = response.data.result.records
                //每次获取图斑后刷新状态，取消地图显示元素
                //bus.$emit('cancelhighlight')
                //this.removeOverlay()
                //this.useCqlFilter()
                
              } else if (response.data.message.includes("Token失效")) {
                this.$message.warning("请重新登录");
              }
              
            }).catch(error => {
              console.log(error);
            })
        },
        getList(){
          var userId = store.getters.userInfo.id;
          const token = Vue.ls.get(ACCESS_TOKEN);
          console.log(token,111111)
            newaxios({
                method: "get",
                url: '/hbzh_back/business/list',
                params: {
                  userID:userId,
                }, headers: {
                  "X-Access-Token": token,
                  'Content-Type': 'application/json;charset=UTF-8',
                }
            }).then(response => {
              console.log(response,555555);
              //if (response.data.message == "操作成功！") {
              if (response.status == 200) {
                //let result = response.data.result;
                let result = response.data;
                console.log(result,123123);
                // for(let i = 0;i<result.length;i++){
                //     if(result[i].type == "黑臭水体"){
                //         this.recordList.push(result[i])
                //     }
                // }
                // this.recordIdReq = this.recordList[0].recordId
                // this.getDataList()
              } else if (response.data.message.includes("Token失效")) {
                this.$message.warning("请重新登录");
              }
            }).catch(error => {
              console.log(error);
            })
        },
        showDetailBox(record){
          this.record = record
          this.showDetail = true
          this.showPicTitle = false
          const token = Vue.ls.get(ACCESS_TOKEN);
            newaxios({
                method: "get",
                url: '/eco_back/verification/getVerificationRecordById?spotId='+record.id,
                headers: {
                  "X-Access-Token": token,
                  'Content-Type': 'application/json;charset=UTF-8',
                }
            }).then(response => {
              if (response.data.message == "操作成功！") {
                this.picList = response.data.result.picBase64
                this.operateUserName = response.data.result.operateUserName
                this.operateUserPhone = response.data.result.operateUserPhone
                this.remark = response.data.result.remark
                if(this.picList.length != 0){
                  this.showPicTitle = true
                  
                }
              } else if (response.data.message.includes("Token失效")) {
                this.$message.warning("请重新登录");
              }
            }).catch(error => {
              console.log(error);
            })
        },
        customRow(record){
        //   return {
        //     on: {
        //       click: () => {
        //         this.curItem = record
        //         bus.$emit('tableToPicture', record);
        //       }
        //     }
        //   }
        },
        
    },
    mounted() {
        this.getList()
   },
}
</script>
<style lang="less" scoped>
    
    .bg-box{
        width:100%;
        height:100%;
        background:rgba(210,210,210,0.5);
        position:fixed;
        top:0;
        left:0;
        z-index:100;
    }
    .detail-box{
        width: 48.69rem;
        max-height: 50.63rem;
        background: #101424;
        border-radius: 0.5rem;
        border: 0.13rem solid #2E425F;
        position:relative;
        left:calc(50% - 24.345rem);
        top:calc(50% - 20.33rem);
        color: #FFFFFF;
    }
    .detail-title{
      width: 100%;
      margin: 10px 0;
      text-align: center;
      font-size: 1.2rem;
      color: #FFFFFF;
    }
    .close-img{
      width: 20px;
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;
    }
    .detail-row{
      width: 100%;
      margin: 10px 20px;
      .detail-item{
        width: 33%;
        padding-right: 10px;
        display: inline-block;
        div{
          display: inline-block;
        }
        .detail-item-label{
          font-weight: 600;
          padding-right: 10px;
        }
      }
      img{
        height: 150px;
        margin: 10px;
        border: 2px solid #999;
      }
    }
</style>